<oDOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <title>Demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" href="../js/finance.css" type="text/css" />
	<script type="text/javascript" src="../lib/prototype/prototype.js"></script>
	<script type="text/javascript" src="../lib/prototype/scriptaculous.js"></script>
	<!--[if IE]>
	<script type="text/javascript" src="../lib/flotr/excanvas.js"></script>
	<script type="text/javascript" src="../lib/flotr/base64.js"></script>
	<![endif]-->
	<script type="text/javascript" src="../lib/flotr/canvas2image.js"></script>
	<script type="text/javascript" src="../lib/flotr/canvastext.js"></script>
	<script type="text/javascript" src="../lib/flotr/flotr.js"></script>
	<script type="text/javascript" src="../js/HumbleBubble.js"></script>
	<script type="text/javascript" src="bubble_data.js"></script>
    <script type="text/javascript">
    document.observe('dom:loaded', function () {

        var data, options, test;

        // Sample data
        //
        // Consists of a time-series of flotr-bubble data
        data = [

            // Classic Flotr Bubble Data:
            [
                // Series A, one bubble (x, y, r)
                [[1,1,1]],
                // Series B, one bubble (x, y, r)
                [[7.6,9.8,4]]
            ],
            [[[1.5,1,1.1]],[[7.8,9.7,4]]],
            [[[2,1,1.2]],[[8,9.5,4.2]]],
            [[[2.5,1.5,1.4]],[[8.2,9,4.2]]],
            [[[3,2.5,1.8]],[[8,8.7,4.4]]],
            [[[3.25,3.5,2.1]],[[7.5,8.5,4.4]]],
            [[[3.5,4,2.2]],[[7,8,4.4]]],
            [[[3.75,4.25,2.2]],[[6.5,6,4.2]]],
            [[[4,4.35,2.2]],[[6,5,3.6]]],
            [[[4.1,4.5,2.1]],[[5.0,3.0,2.8]]],
            [[[4,4.75,2.1]],[[4,2,2.4]]],
            [[[3.9,4.85,2]],[[3,2,2.2]]],
            [[[3.8,4.9,2]],[[2,2,2]]]
        ];

        // Configuration
        options = {
            node : 'humblefinance',
            data : bubble_data//,
            //animate : true
        };

        // Graph
        test = new Humble.Bubble(options);
        test.draw();

        $('play').observe('click', function (e) {
            test.animate();
        });
    });
    </script>
</head>
<body>
<div id="body-container" >
    <div id="header-container"><div id="header"></div></div>
    <div id="links-container"><div id="links"></div></div>
    <div id="content-container"><div id="content">
<h3>Demo:</h3>
<button id="play">Play</button>
<div id="humblefinance" style="position: relative; margin: 4px 0px; width: 600px; height : 400px; border: 1px solid #99CCFF;";></div>
    </div></div>
    <div id="footer-container"><div id="footer"></div></div>
</div>
</body>
</html>
